<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { Plus, BellFilled, Search, MoreFilled, Back, Select, Download, Document, Refresh, Edit, Delete } from '@element-plus/icons-vue'
import openlayers from '@/components/openlayer.vue'
import { project, deleteProject, ProjectWithFiles, gOne, updateProjectWithFiles, addSchedule } from '@/utils/api.js'
import moment from 'moment';


// 对象
const $moment = moment;
const ols = ref(null)
const isren = ref(false)
const isaddp = ref(false)
const isedtb = ref(false)
const iseidt = ref(1)
const keyword = ref('');
const input3 = ref('');
const projectStatusStr = ref('');
const start = ref('');
const end = ref('');
const tableData = ref([]);
const ivlist = ref([]);
const filesl = ref([]);
const fid = ref([]);
const prol = ref({
  projectStatus: '未启动'
});

const Drawing = ref('')

const peosts = ref('')

const ruleF = ref(null);
const ruleFo = reactive({
  projectStatus: '',
  content: '',
  relateId: ''
})

const rul = reactive({
  content: [
    { required: true, message: '工作内容不能为空', trigger: 'blur' }
  ],
  projectStatus: [
    {
      required: true,
      message: '进度不能为空',
      trigger: 'change',
    },
  ],

})

/* B 解析后端返回的geometryDataList，统一转换为数组 */
const parseGeometryDataList = (data) => {
  if (!data) {
    return [];
  }
  try {
    if (Array.isArray(data)) {
      return data;
    }
    return JSON.parse(data);
  } catch (error) {
    console.warn('parseGeometryDataList: 解析失败', error, data);
    return [];
  }
}
/* E */

const ruleFormRef = ref(null);
const ruleForm = reactive({
  projectName: '',
  type: '',
  projectDescription: '',
  startTime: '',
  estimatedEndTime: '',
  actualEndTime: '',
  leader: '',
  otherLeaders: '',
  responsibleUnit: '',
  lon: null,
  lat: null,
  areaId: '',
  geometryDataList: []
})

const rules = reactive({
  projectName: [
    { required: true, message: '项目名称不能为空', trigger: 'blur' },
    { min: 1, max: 13, message: '标题内容字数控制在1-13个字符之间', trigger: 'blur' }
  ],
  // lon: [
  //   { required: true, message: '经度不能为空', trigger: 'blur' },
  //   {
  //     validator: (rule, value, callback) => {
  //       const num = parseFloat(value)
  //       if (isNaN(num)) {
  //         callback(new Error('经度必须是数字'))
  //       } else if (num < -180 || num > 180) {
  //         callback(new Error('经度必须在 -180 到 180 之间'))
  //       } else {
  //         callback()
  //       }
  //     },
  //     trigger: 'blur'
  //   }
  // ],
  // lat: [
  //   { required: true, message: '纬度不能为空', trigger: 'blur' },
  //   {
  //     validator: (rule, value, callback) => {
  //       const num = parseFloat(value)
  //       if (isNaN(num)) {
  //         callback(new Error('纬度必须是数字'))
  //       } else if (num < -90 || num > 90) {
  //         callback(new Error('纬度必须在 -90 到 90 之间'))
  //       } else {
  //         callback()
  //       }
  //     },
  //     trigger: 'blur'
  //   }
  // ],
  startTime: [
    {
      type: 'date',
      required: true,
      message: '选择时间',
      trigger: 'change',
    },
  ],

})


const handleAdd = () => {
  for (const key in ruleForm) {
    if (key === 'geometryDataList') continue;
    ruleForm[key] = ''
  }
  ruleForm.geometryDataList = []; // 重置几何数据列表
  ivlist.value = [];
  filesl.value = [];
  iseidt.value = 1;
  isaddp.value = true;
  /* B 清空绘制图层 */
  if (ols.value) {
    ols.value.clearAllDrawFeatures();
    ols.value.stopDraw();
    ols.value.renderDrawFeatures(ruleForm.geometryDataList);
  }
  /* E */
}

const handleDownload = (file) => {
  const link = document.createElement('a')
  link.href = file.path
  link.download = file.tag || '下载文件'
  link.target = '_blank' // 可选，让它在新窗口中打开
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

const cameraup = (event) => {
  let file = event.target.files;
  for (let i = 0; i < file.length; i++) {
    let imgUrl = URL.createObjectURL(file[i]);
    let z = {
      tag: file[i].name,
      id: file[i].lastModified,
      file: file[i],
      url: imgUrl,
      type: file[i].type
    }
    ivlist.value.push(z)
  }
  event.target.value = '';
}

const delli = (item) => {
  ivlist.value.splice(item, 1)
}

const dellis = (i, item) => {
  fid.value.push(i.id);
  filesl.value.splice(item, 1);
}

const formatDate = (date) => {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

const handleDateChange = (value) => {
  if (value && value.length === 2) {
    start.value = formatDate(value[0]) + '~' + formatDate(value[1]);
    end.value = formatDate(value[1]);
  } else {
    start.value = '';
    end.value = '';
  }
  getproject()

}

const getOne = async (item) => {
  iseidt.value = 2;
  fid.value = [];
  ivlist.value = [];
  let res = await gOne(item)
  if (res.code == 200) {

    let obj = res.data;
    /* B 解析服务端返回的几何数据，确保为数组 */
    obj.geometryDataList = parseGeometryDataList(JSON.parse(obj.geometryDataList));
    /* E */
    obj.startTime = new Date(obj.startTime);
    obj.estimatedEndTime = new Date(obj.estimatedEndTime);
    obj.actualEndTime = new Date(obj.actualEndTime);

    Object.assign(ruleForm, obj)

    filesl.value = res.data.documentList;

    isaddp.value = true;

    /* B 回显绘制的几何图形 */
    if (ols.value && ruleForm.geometryDataList && ruleForm.geometryDataList.length > 0) {
      // 使用nextTick确保地图已初始化
      setTimeout(() => {
        ols.value.renderDrawFeatures(ruleForm.geometryDataList);
      }, 100);
    }
    /* E */
  } else {
    ElMessage({
      type: 'warning',
      message: res.data.message,
    })
  }
}

const gbsd = () => {
  isedtb.value = false;
  /* B 返回详情时清空地图绘制图层 */
  if (ols.value) {
    ols.value.clearAllDrawFeatures();
    ols.value.renderDrawFeatures([]);
  }
  /* E */
}

const lkdes = async (item) => {
  let res = await gOne(item)
  if (res.code == 200) {
    const geometryDataList = parseGeometryDataList(res.data.geometryDataList);
    prol.value = {
      ...res.data,
      geometryDataList
    };

    /* B 将详情数据回显到地图 */
    if (ols.value) {
      ols.value.renderDrawFeatures(geometryDataList);
    }
    /* E */

    isedtb.value = true;
  } else {
    ElMessage({
      type: 'warning',
      message: res.data.message,
    })
  }
}

const renpro = (item) => {
  peosts.value = item.projectStatus;
  for (const key in ruleFo) {
    ruleFo[key] = ''
  }

  ruleFo.relateId = item.id;
  isren.value = true
}

const submitF = async (formEl) => {
  if (!formEl) return
  const valid = await formEl.validate()
  if (!valid) return console.log('表单校验失败')

  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  setTimeout(function () {
    loading.close()
  }, 5000)

  try {
    let res = await addSchedule(ruleFo)
    if (res.code == 200) {
      loading.close()
      ElMessage.success('更新成功')
      getproject()
      isren.value = false
    } else {
      ElMessage.warning(res.message)
    }
  } catch (error) {
    loading.close()
    console.error('提交出错:', error)
    ElMessage.error('提交异常，请稍后重试')
  }
}

const resetF = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  isren.value = false
}

const submitForm = async (formEl) => {
  if (!formEl) return
  const valid = await formEl.validate()
  if (!valid) return console.log('表单校验失败')

  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  let formData = new FormData();
  let tempForm = JSON.parse(JSON.stringify(ruleForm))
  tempForm.areaId = JSON.parse(window.sessionStorage.getItem('usermsg')).areaId;
  tempForm.startTime = tempForm.startTime ? formatDate(tempForm.startTime) : '';
  tempForm.actualEndTime = tempForm.actualEndTime ? formatDate(tempForm.actualEndTime) : '';
  tempForm.estimatedEndTime = tempForm.estimatedEndTime ? formatDate(tempForm.estimatedEndTime) : '';
  tempForm.geometryDataList = JSON.stringify(tempForm.geometryDataList);

  setTimeout(function () {
    loading.close()
  }, 5000)

  try {
    let res, str = '';
    if (iseidt.value == 1) {
      tempForm['deleteMediaIdList'] = [];
      let dataStr = JSON.stringify(tempForm)
      formData.append('dataStr', dataStr);
      ivlist.value.forEach(e => {
        formData.append('files', e.file);
      })
      str = '新增成功';
      res = await ProjectWithFiles(formData)
    }

    if (iseidt.value == 2) {
      tempForm['deleteMediaIdList'] = fid.value;
      let dataStr = JSON.stringify(tempForm)
      formData.append('dataStr', dataStr);
      ivlist.value.forEach(e => {
        formData.append('files', e.file);
      })
      str = '编辑成功';
      res = await updateProjectWithFiles(formData)
    }

    if (res.code == 200) {
      loading.close()
      ElMessage.success(str)
      getproject()
      /* B 清空绘制图层 */
      if (ols.value) {
        ruleForm.geometryDataList = [];
        ols.value.clearAllDrawFeatures();
        ols.value.stopDraw();
        ols.value.renderDrawFeatures(ruleForm.geometryDataList);
      }
      /* E */
      isaddp.value = false;
    } else {
      ElMessage.warning(res.message)
    }
  } catch (error) {
    loading.close()
    console.error('提交出错:', error)
    ElMessage.error('提交异常，请稍后重试')
  }
}

const resetForm = (formEl) => {
  if (!formEl) return

  /* B 清空绘制图层 */
  if (ols.value) {
    ruleForm.geometryDataList = [];
    ols.value.clearAllDrawFeatures();
    ols.value.stopDraw();
    ols.value.renderDrawFeatures(ruleForm.geometryDataList);
  }
  Drawing.value = ''; // 清空绘制类型选择

  setTimeout(function () {
    formEl.resetFields()
    isaddp.value = false;
  }, 500)
}

const getproject = async () => {
  let areaId = JSON.parse(window.sessionStorage.getItem('usermsg')).areaId;
  let params = `?pageSize=99999&pageNum=0&keyword=${keyword.value}&projectStatusStr=${projectStatusStr.value || ''}&areaId=${areaId}&timeStr=${start.value}`
  let res = await project(params)

  if (res.code == 200) {
    tableData.value = res.data.content;
  }
}

const delids = (item) => {
  ElMessageBox.confirm(
    '是否永久删除该数据， 继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteProject(item).then(res => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        getproject()
      })
        .catch(() => {
          ElMessage({
            type: 'warning',
            message: res.data.message,
          })
        })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

/* B ============================================ 绘制功能相关方法 ============================================ */

/**
 * 生成几何图形的名称
 * 根据类型和现有数据统计，生成递增的名称（如：点1、面2、线3）
 * @param {String} type - 几何类型：'Point' | 'LineString' | 'Polygon' | 'Circle'
 * @returns {String} 生成的名称
 */
const generateGeometryName = (type) => {
  /* B 类型名称映射 */
  const typeNameMap = {
    'Point': '点',
    'LineString': '线',
    'Polygon': '面',
    'Circle': '圆形'
  };
  const typeName = typeNameMap[type] || type;
  /* E */

  /* B 统计该类型已存在的数量 */
  let count = 0;
  ruleForm.geometryDataList.forEach(item => {
    if (item.type === type) {
      count++;
    }
  });
  /* E */

  /* B 生成名称：类型名 + (数量+1) */
  return `${typeName}${count + 1}`;
}

/**
 * 处理绘制完成的几何图形
 * 接收子组件传递的GeoJSON数据，生成名称并添加到geometryDataList
 * @param {Object} data - 包含type和geojson的对象
 */
const onGeometryDraw = (data) => {
  if (!data || !data.type || !data.geojson) {
    console.warn('onGeometryDraw: 数据格式不正确', data);
    return;
  }

  /* B 生成名称 */
  const name = generateGeometryName(data.type);
  /* E */

  /* B 添加到geometryDataList */
  ruleForm.geometryDataList.push({
    type: data.type,
    name: name,
    geojson: data.geojson
  });
  /* E */

  /* B 立即回显最新绘制结果，保持连续绘制 */
  if (ols.value) {
    ols.value.renderDrawFeatures(ruleForm.geometryDataList);
  }
  /* E */
}

/**
 * 删除几何图形
 * 从geometryDataList中删除指定索引的记录，同时从地图上删除对应的绘制图形
 * @param {Number} index - 要删除的索引
 */
const deleteGeometry = (index) => {
  if (index < 0 || index >= ruleForm.geometryDataList.length) {
    console.warn('deleteGeometry: 索引无效', index);
    return;
  }

  /* B 从列表中删除 */
  ruleForm.geometryDataList.splice(index, 1);
  /* E */

  /* B 从地图上删除对应的绘制图形 */
  if (ols.value) {
    ols.value.renderDrawFeatures(ruleForm.geometryDataList);
  }
  /* E */
}

/**
 * 监听绘制类型变化
 * 当用户选择或清空绘制类型时，启动或停止绘制模式
 */
watch(Drawing, (newVal, oldVal) => {
  if (!ols.value) {
    return;
  }

  /* B 如果选择了绘制类型，启动绘制 */
  if (newVal && newVal !== '') {
    ols.value.startDraw(newVal);
  } else {
    /* B 如果清空了选择，停止绘制 */
    ols.value.stopDraw();
  }
  /* E */
});

/**
 * 深度监听geometryDataList变化
 * 用于在用户修改名称或其他属性时实时更新地图上的标签
 */
watch(() => ruleForm.geometryDataList, (newVal) => {
  if (!ols.value) {
    return;
  }
  ols.value.renderDrawFeatures(newVal);
}, { deep: true });

/* E ============================================ 绘制功能相关方法结束 ============================================ */

onMounted(() => {
  getproject()
})

defineExpose({
  $moment
})

</script>

<template>
  <div class="xmglbs">
    <openlayers ref="ols" @geometryDraw="onGeometryDraw" />
    <div class="xgp">
      <div class="flx">
        <span style="font-size: 16px; font-weight: 700">项目管理</span>
        <div class="flx xgpt" @click.stop="handleAdd()">
          <el-icon>
            <Plus />
          </el-icon>
          <span> 新增项目 </span>
        </div>
      </div>
      <div style="height: 16px"></div>
      <el-row :gutter="5">
        <el-col :span="11">
          <el-date-picker v-model="input3" style="width: 100%" @change="handleDateChange" size="large" type="daterange"
            range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-col>
        <el-col :span="6">
          <el-select v-model="projectStatusStr" placeholder="项目进度" size="large" style="width: 100%" clearable
            @change="getproject()">
            <el-option label="未启动" value="未启动" />
            <el-option label="项目启动" value="项目启动" />
            <el-option label="项目施工" value="项目施工" />
            <el-option label="项目验收" value="项目验收" />
            <el-option label="项目完成" value="项目完成" />
          </el-select>
        </el-col>
        <el-col :span="7">
          <el-input v-model="keyword" style="width: 100%" size="large" placeholder="项目名称" class="input-with-select">
            <template #append>
              <el-button @click.stop="getproject()" :icon="Search" />
            </template> </el-input></el-col>
      </el-row>
      <div style="height: 16px"></div>
      <el-table :data="tableData" style="width: 100%; height: calc(100% - 100px)" :row-style="{ height: '55px' }">
        <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip width="180">
        </el-table-column>
        <el-table-column label="当前进度" width="120">
          <template #default="scope">
            <div class="tbtn flx2 st1" v-if="scope.row.projectStatus == '项目完成'">
              <el-icon>
                <BellFilled />
              </el-icon>
              <span>项目完成</span>
            </div>
            <div class="tbtn flx2 st2" v-if="scope.row.projectStatus == '未启动'">
              <el-icon>
                <BellFilled />
              </el-icon>
              <span>未启动</span>
            </div>
            <div class="tbtn flx2 st3" v-if="scope.row.projectStatus == '项目施工'">
              <el-icon>
                <BellFilled />
              </el-icon>
              <span>项目施工</span>
            </div>
            <div class="tbtn flx2 st4" v-if="scope.row.projectStatus == '项目验收'">
              <el-icon>
                <BellFilled />
              </el-icon>
              <span>项目验收</span>
            </div>
            <div class="tbtn flx2 st5" v-if="scope.row.projectStatus == '项目启动'">
              <el-icon>
                <BellFilled />
              </el-icon>
              <span>项目启动</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="启动时间"> </el-table-column>
        <el-table-column label="操作" style="text-align: center">
          <template #default="scope">
            <div class="flx4" style="cursor: pointer">
              <el-icon @click.stop="lkdes(scope.row.id)" title="查看详情">
                <Document />
              </el-icon>
              <el-icon @click.stop="renpro(scope.row)" title="更新进度">
                <Refresh />
              </el-icon>
              <el-icon @click.stop="getOne(scope.row.id)" title="编辑信息">
                <Edit />
              </el-icon>
              <el-icon @click.stop="delids(scope.row.id)" title="删除信息">
                <Delete />
              </el-icon>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增项目 -->
    <template v-if="isaddp">
      <div class="xgp" style="z-index: 4">
        <div class="flx">
          <span style="font-size: 16px; font-weight: 700">新增项目</span>
        </div>
        <div style="height: 16px"></div>
        <div class="addfb scol">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top" label-width="auto">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="ruleForm.projectName" />
            </el-form-item>
            <el-form-item label="项目描述">
              <el-input :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" v-model="ruleForm.projectDescription" />
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="ruleForm.type" />
            </el-form-item>
            <el-form-item label="启动时间" prop="startTime">
              <el-date-picker v-model="ruleForm.startTime" type="date" aria-label="选择时间" placeholder="选择时间"
                style="width: 100%" />
            </el-form-item>
            <el-form-item label="预计结束时间">
              <el-date-picker v-model="ruleForm.actualEndTime" type="date" aria-label="选择预计结束时间" placeholder="选择预计结束时间"
                style="width: 100%" />
            </el-form-item>
            <el-form-item label="实际结束时间">
              <el-date-picker v-model="ruleForm.estimatedEndTime" type="date" aria-label="选择实际结束时间"
                placeholder="选择实际结束时间" style="width: 100%" />
            </el-form-item>
            <el-form-item label="总负责人">
              <el-input v-model="ruleForm.leader" />
            </el-form-item>
            <el-form-item label="其他负责人">
              <el-input v-model="ruleForm.otherLeaders" />
            </el-form-item>
            <el-form-item label="负责单位">
              <el-input v-model="ruleForm.responsibleUnit" />
            </el-form-item>
            <div class="flx3" style="margin-bottom: 16px">
              <span>地图绘制</span>
              <span style="color: #e6a23c; margin-left: 8px">（线、面类型，按住Shift键可以自由绘制）</span>
            </div>

            <el-form-item label="绘制类型">
              <el-select v-model="Drawing" placeholder="请选择绘制类型" style="width: 100%">
                <el-option label="点" value="Point" />
                <el-option label="线" value="LineString" />
                <el-option label="面" value="Polygon" />
                <!-- <el-option label="圆形" value="Circle" /> -->
              </el-select>
            </el-form-item>

            <ul class="fils">
              <li class="flx" v-for="(i, index) in ruleForm.geometryDataList" :key="`geo${index}d`">
                <div class="flx3">
                  <span>绘制类型：{{ i.type === 'Point' ? '点' : i.type === 'LineString' ? '线' : i.type === 'Polygon' ? '面' :
                    i.type === 'Circle' ? '圆形' : i.type }}</span>
                </div>
                <div class="flx3">
                  <span style="display: inline-block;width: 120px;">图层名称：</span> <el-input v-model="i.name" />
                </div>
                <el-icon @click.stop="deleteGeometry(index)" style="color: red; cursor: pointer" title="删除">
                  <Delete />
                </el-icon>
              </li>
            </ul>

            <!-- <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="经度" prop="lon">
                  <el-input v-model="ruleForm.lon" placeholder="示例格式：116.78" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纬度" prop="lat">
                  <el-input v-model="ruleForm.lat" placeholder="示例格式：45.78" />
                </el-form-item>
              </el-col>
            </el-row> -->
          </el-form>

          <div class="flx" style="margin: 24px 0;">
            <span>相关文件</span>
            <div class="flx xgpt" style="position: relative">
              <el-icon>
                <Plus />
              </el-icon>
              <span>文件上传</span>

              <input class="wls-upload" @change="cameraup($event, 0)" ref="upload" multiple type="file" />
            </div>
          </div>
          <ul class="fils">
            <li class="flx" v-for="(i, index) in ivlist" :key="i.id">
              <div class="flx3">
                <el-icon style="margin-right: 8px; color: #54a0ff">
                  <Document />
                </el-icon>
                <span>{{ i.tag }}</span>
              </div>
              <el-icon @click.stop="delli(index)" style="color: red">
                <Delete />
              </el-icon>
            </li>

            <li class="flx" v-for="(i, index) in filesl" :key="i.id">
              <div class="flx3">
                <el-icon style="margin-right: 8px; color: #54a0ff">
                  <Document />
                </el-icon>
                <span>{{ i.tag }}</span>
              </div>
              <el-icon @click.stop="dellis(i, index)" style="color: red">
                <Delete />
              </el-icon>
            </li>
          </ul>
        </div>
        <div class="flx2" style="height: 60px; align-items: flex-end">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            保存
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </div>
      </div>
    </template>
    <template v-if="isedtb">
      <div class="xgp" style="z-index: 4">
        <div class="flx">
          <span style="font-size: 16px; font-weight: 700">查看详情</span>
          <el-button :icon="Back" @click.stop="gbsd" size="large" plain>返回</el-button>
        </div>
        <div style="height: 16px"></div>
        <div class="addfb scol">
          <div class="flx">
            <div class="flx2">
              <span style="font-size: 24px; font-weight: 700; margin-right: 14px">{{ prol.projectName }}</span>
              <el-button plain size="small" title="项目类型" type="info">{{
                prol.type ? prol.type : "--"
              }}</el-button>
            </div>

            <div class="tbtn flx2 st1" v-if="prol.projectStatus == '项目完成'">
              <el-icon>
                <BellFilled />
              </el-icon>
              <span>项目完成</span>
            </div>
            <div class="tbtn flx2 st2" v-if="prol.projectStatus == '未启动'">
              <el-icon>
                <BellFilled />
              </el-icon>
              <span>未启动</span>
            </div>
            <div class="tbtn flx2 st3" v-if="prol.projectStatus == '项目施工'">
              <el-icon>
                <BellFilled />
              </el-icon>
              <span>项目施工</span>
            </div>
            <div class="tbtn flx2 st4" v-if="prol.projectStatus == '项目验收'">
              <el-icon>
                <BellFilled />
              </el-icon>
              <span>项目验收</span>
            </div>
            <div class="tbtn flx2 st5" v-if="prol.projectStatus == '项目启动'">
              <el-icon>
                <BellFilled />
              </el-icon>
              <span>项目启动</span>
            </div>
          </div>

          <div style="
              width: 100%;
              margin: 8px 0;
              line-height: 2;
              color: rgba(96, 98, 102, 1);
            ">
            <span>{{ prol.projectDescription }}</span>
          </div>
          <div class="flx3" style="margin-bottom: 16px">
            <div class="zhuzi"></div>
            <div>项目进度</div>
          </div>

          <el-timeline style="width: 90%; margin-left: 5%">
            <el-timeline-item v-for="(activity, index) in prol.projectScheduleList" :key="index" :icon="Select"
              color="rgba(67, 207, 124, 1)" size="large" placement="top" :timestamp="`${$moment(activity.insertTime).format(
                'YYYY-MM-DD'
              )}  ${activity.projectStatus}`">
              <el-card>
                <div style="width: 100%; overflow: hidden">
                  <span style="word-break: break-all">{{
                    activity.content ? activity.content : "未更新内容"
                  }}</span>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>

          <div class="flx3" style="margin: 16px 0">
            <div class="zhuzi"></div>
            <div>项目信息</div>
          </div>
          <ul class="fils">
            <li class="flx" style="border-bottom: 1px solid rgba(220, 223, 230, 1)">
              <span>启动时间：</span>
              <span>{{ prol.startTime }}</span>
            </li>
            <li class="flx" style="border-bottom: 1px solid rgba(220, 223, 230, 1)">
              <span>预计结束时间：</span>
              <span>{{ prol.actualEndTime }}</span>
            </li>
            <li class="flx" style="border-bottom: 1px solid rgba(220, 223, 230, 1)">
              <span>实际结束时间：</span>
              <span>{{ prol.estimatedEndTime }}</span>
            </li>
            <li class="flx" style="border-bottom: 1px solid rgba(220, 223, 230, 1)">
              <span>总负责人：</span>
              <span>{{ prol.leader }}</span>
            </li>
            <li class="flx" style="border-bottom: 1px solid rgba(220, 223, 230, 1)">
              <span>其他负责人：</span>
              <span>{{ prol.otherLeaders }}</span>
            </li>
            <li class="flx" style="border-bottom: 1px solid rgba(220, 223, 230, 1)">
              <span>负责单位：</span>
              <span>{{ prol.responsibleUnit }}</span>
            </li>
            <!-- <li class="flx" style="border-bottom: 1px solid rgba(220, 223, 230, 1)">
              <span>经度：</span>
              <span>{{ prol.lon }}</span>
            </li>
            <li class="flx" style="border-bottom: 1px solid rgba(220, 223, 230, 1)">
              <span>纬度：</span>
              <span>{{ prol.lat }}</span>
            </li> -->
          </ul>
          <div class="flx3" style="margin: 16px 0">
            <div class="zhuzi"></div>
            <div>相关文件</div>
          </div>
          <ul class="fils">
            <li class="flx" v-for="(i, index) in prol.documentList" :key="i.id">
              <div class="flx3">
                <el-icon style="margin-right: 8px; color: #54a0ff">
                  <Document />
                </el-icon>
                <span>{{ i.tag }}</span>
              </div>
              <el-icon @click.stop="handleDownload(i, index)" style="color: #00c95c">
                <Download />
              </el-icon>
            </li>
          </ul>
        </div>
      </div>
    </template>
    <!-- 更新进度 -->
    <div class="renewal flx2" v-if="isren">
      <div class="renb">
        <div class="flx3" style="margin-bottom: 16px; height: 20px">
          <div class="zhuzi"></div>
          <div style="font-size: 18px">更新进度</div>
        </div>

        <div class="flx">
          <div class="flx2">
            <span>&nbsp;&nbsp;当前进度</span>
          </div>

          <div class="tbtn flx2 st1" v-if="peosts == '项目完成'">
            <el-icon>
              <BellFilled />
            </el-icon>
            <span>项目完成</span>
          </div>
          <div class="tbtn flx2 st2" v-if="peosts == '未启动'">
            <el-icon>
              <BellFilled />
            </el-icon>
            <span>未启动</span>
          </div>
          <div class="tbtn flx2 st3" v-if="peosts == '项目施工'">
            <el-icon>
              <BellFilled />
            </el-icon>
            <span>项目施工</span>
          </div>
          <div class="tbtn flx2 st4" v-if="peosts == '项目验收'">
            <el-icon>
              <BellFilled />
            </el-icon>
            <span>项目验收</span>
          </div>
          <div class="tbtn flx2 st5" v-if="peosts == '项目启动'">
            <el-icon>
              <BellFilled />
            </el-icon>
            <span>项目启动</span>
          </div>
        </div>
        <div style="height: 16px"></div>
        <el-form ref="ruleF" :model="ruleFo" :rules="rul" label-position="top" label-width="auto">
          <el-form-item label="更新进度" prop="projectStatus">
            <el-select v-model="ruleFo.projectStatus" placeholder="项目进度" size="large" style="width: 100%" clearable>
              <el-option label="未启动" value="未启动" />
              <el-option label="项目启动" value="项目启动" />
              <el-option label="项目施工" value="项目施工" />
              <el-option label="项目验收" value="项目验收" />
              <el-option label="项目完成" value="项目完成" />
            </el-select>
          </el-form-item>
          <el-form-item label="工作内容" prop="content">
            <el-input :autosize="{ minRows: 8, maxRows: 16 }" type="textarea" v-model="ruleFo.content" />
          </el-form-item>
        </el-form>
        <div class="flx2" style="height: 60px; align-items: flex-end">
          <el-button type="primary" @click="submitF(ruleF)"> 保存 </el-button>
          <el-button @click="resetF(ruleF)">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.flx {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flx4 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flx2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flx3 {
  display: flex;
  align-items: center;
}

.xgp {
  width: 600px;
  height: calc(100% - 32px);
  padding: 24px;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  overflow: hidden;
}

.xgpt {
  color: #387bff;
  cursor: pointer;
}

.xgpt i {
  margin-right: 4px;
}

.addfb {
  width: 100%;
  height: calc(100% - 100px);
  border-bottom: 1px solid #dcdfe6;
}

.wls-upload {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  cursor: pointer;
}

.fils {
  width: 100%;
}

.fils li {
  height: 40px;
  cursor: pointer;
}

.fils li>div {
  height: 100%;
}

.tbtn {
  width: 98px;
  height: 32px;
}

.tbtn i {
  margin-right: 6px;
}

.st1 {
  background-color: rgba(67, 207, 124, 0.1);
  color: rgba(67, 207, 124, 1);
}

.st2 {
  background-color: rgba(170, 170, 170, 0.1);
  color: rgba(170, 170, 170, 1);
}

.st3 {
  background-color: rgba(255, 195, 0, 0.1);
  color: rgba(255, 195, 0, 1);
}

.st4 {
  background-color: rgba(121, 72, 234, 0.1);
  color: rgba(121, 72, 234, 1);
}

.st5 {
  background-color: rgba(56, 123, 255, 0.1);
  color: rgba(56, 123, 255, 1);
}

.zhuzi {
  width: 4px;
  height: 16px;
  margin-right: 8px;
  border-radius: 3px;
  background-color: rgba(56, 123, 255, 1);
}

.renewal {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

.renb {
  width: 500px;
  height: 500px;
  padding: 24px;
  position: relative;
  background-color: #fff;
  border-radius: 4px;
}
</style>
